<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>订单</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/order.css">
</head>
<body>
    <div class="header">
        <div class="header_all"><img src="image/order_2.jpg" draggable="false"></div>
    </div>
    <div class="address">
        <div class="address_all">
            <div class="title">
                收货相关信息
            </div>
            <div class="content">
                <h4>收货人信息</h4>
                <div class="info"><span style="color:red;">*</span>收货人：<input type="text" class="people"></div>
                <div class="infoc">
                    <div>
                    <span style="color:red;">*</span>所在地区：               
                    <select id="s_province" name="s_province"></select>                  
                    <select id="s_city" name="s_city" ></select>                 
                    <select id="s_county" name="s_county"></select>                
                             
                    </div>               
                    <div id="show"></div>               
                </div>
                <div class="info"><span style="color:red;">*</span>详细地址：<input type="text" class="addr"></div>
                <div class="info"><span style="color:red;">*</span>手机号码：
                    <select class="sel">
                        <option>大陆</option>
                        <option>香港</option>
                        <option>美国</option>
                    </select>
                    <input type="text" class="con"></div>
                <div class="btn">确认收货地址</div>
            </div>
        </div>
    </div>
    <div class="product">
        <div class="product_all">
            <div class="title">商品清单</div>
            <div class="pro">
                <ul>
                    <li>商品名称</li>
                    <li>发货站</li>
                    <li>会员价</li>
                    <li>数量</li>
                    <li>运费</li>
                    <li>小计</li>
                </ul>
                <div class="aa">
                    <!-- <ul>
                        <li>xxx嘻嘻嘻嘻嘻嘻嘻嘻</li>
                        <li>中国大陆</li>
                        <li>592元</li>
                        <li>1</li>
                        <li>0元</li>
                        <li>593元</li>
                    </ul> -->
                </div>
            </div>

        </div>
    </div>
    <div class="jiesuan">
            <div class="jiesuan_left">
                <div class="jiesuan_left_bottom"><a href="index.html">继续购物</a></div>
            </div>
            
            <div class="jiesuan_right">商品金额总计(不含税金和运费)：<span id="jiesuan"></span>
                <div class="jiesuan_right_bottom"><a href="#">立即结算</a></div>
            </div>
        </div>
    <div class="bottom"><img src="image/car_bottom_02.jpg" draggable="false"></div>
</body>
</html>

<script src="js/cookie.js"></script>
<script src="js/ajax.js"></script>
<script src="js/public.js"></script>
<script class="resources library" src="js/area.js" type="text/javascript"></script>                                                   
<script type="text/javascript">_init_area();</script>   
<script type="text/javascript">
    var Gid  = document.getElementById ;    
    var showArea = function(){  
        Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" + 	   
        Gid('s_city').value + " - 县/区" +    
        Gid('s_county').value + "</h3>"   
          }   
    // Gid('s_county').setAttribute('onchange','showArea()');
</script>
<script>
    var con = document.querySelector(".con");
    var sel = document.querySelector(".sel")
    sel.onchange = function(){
        con.value = this.value;
    }
    var aa = document.querySelector(".aa")
    var jiesuan = document.querySelector(".jiesuan_right_bottom");
    var sum = 0;
    //http://jx.xuzhixiang.top/ap/api/cart-list.php?id=1
    var uid = getCookie("uname")
    console.log(uid);
    var url = `http://jx.xuzhixiang.top/ap/api/cart-list.php?id=${uid}`;
    ajax(url,function(res){
        console.log(res.data)
        var html = "";
        for( var i = 0 ; i< res.data.length;i++){
            html += ` <ul>
                        <li>${res.data[i].pname}</li>
                        <li>中国大陆</li>
                        <li>${res.data[i].pprice}</li>
                        <li>${res.data[i].pnum}</li>
                        <li>0元</li>
                        <li>${res.data[i].pprice*res.data[i].pnum}</li>
                    </ul>`;
                    //结算
                    sum += res.data[i].pprice*res.data[i].pnum ; 
        }
        aa.innerHTML += html; 
        $id("jiesuan").innerHTML = sum;
    })

    var pop = document.querySelector(".people");
    var addr = document.querySelector(".addr");
    var con = document.querySelector(".con");
    var oBtn = document.querySelector(".btn")
    //检测输入框
    function isnull(val){
        var str = val.replace(/(^\s*)|(\s*$)/g, '');//去除空格
        if (str == '' || str == undefined || str == null) {
            return true;
           // alert('有的内容为空')
        } else {
            return false;
            //alert('已保存');
        }
    }

    oBtn.onclick = function(){
       if( (isnull( pop.value))|| (isnull( addr.value ))||(isnull( con.value )) ) {
            alert('有的内容为空')
        console.log(isnull( pop.value ))
       }else{
            alert('已保存');
       }
    }
</script>